<template>
  <div class="whole">
      
      <Header textName="分类" style="margin-left:-0.1rem;"></Header>
    <input type="search" placeholder="手机" class="sousuo" />
    <!-- 侧边栏 -->
    <div class="cebianlan">
      <ul>
        <li v-for="(cate,index) in categoryList" :key="cate.id" @click="qieHuan(cate.id,index)" :class=" index === smindex ? 'active' : ''" style="margin-top:5px">{{cate.name}}</li>
        
      </ul>
      <div>
         <!-- 图片 -->
          <div class="tupian">
            <img :src="categoryList[smindex].banner_url" />
          </div>
          <!-- 精选分类 -->
          <div class="fenlei">
          <h4>精选分类</h4>
          <ul>
            <li v-for="sub in categoryList" @click="fenlei()">
              <img :src="sub.wap_banner_url" />
              <span>{{sub.name}}</span>
            </li>
            
          </ul>
        </div>
        <!-- 精选专区 -->
        <div class="zhuanqu">
          <h4>精选专区</h4>
          <ul>
            <li v-for="sub in categoryList" @click="fenlei()">
              <img :src="sub.img_url">
              <span>{{sub.name}}</span>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Header from '@/components/Header'
  import {Catalog} from '@/api'
  export default {
    name:'Commodity',
    components:{Header},
    data(){
      return {
        categoryList:[
          {
            banner_url:"http://yanxuan.nosdn.127.net/92357337378cce650797444bc107b0f7.jpg"
          }
        ],
        smindex:0,
      }
    },
    methods: {
      async getCatalog(){
        const result = await Catalog()
        this.categoryList = result.data.categoryList
        
      }, 
      qieHuan(id,index){
        this.smindex = index
        this.getCatalog(id)
        this.categoryList.find(item => {
         return this.subCategoryList =item.subCategoryList
        });
      },
      fenlei(){
        this.$toast("暂无数据,请前往搜索进入详情");
      }
    },
    mounted() {
      this.getCatalog()
    },
  }
</script>

<style lang="less" scoped>
  *{
    margin: 0;
    padding: 0;
  }
  .whole{
    padding: 0 10px;
    .sousuo{
      width: 100%;
      height: 60px;
      border-radius: 70px;
      border: none;
      background: #f6f6f6;
      color: #939393;
      padding-left: 20px;
    }
    .biaoti{
      margin-left: 20px;
      font-size: 24px;
    }
    .cebianlan{
      padding-top: 1rem;
      display: flex;
      justify-content: space-evenly;
      background: #fff;
      ul{
        list-style: none;
        height: 1570px;
        width: 300px;
        background-color: #f6f6f6;
        overflow-y:scroll ;
        li{
          margin-bottom: 40px;
          text-align: center;
          width: 250px;
          height: 70px;
          line-height: 70px;
          margin-left: 10px;
        }
      }
      .tupian{
        width: 600px;
        height: 200px;
      
        img{
          width: 100%;
          height: 100%;
          border-radius: 5%;
        }
      }
      .fenlei{
        border: 1px solid #fff;
        border-radius: 5%;
        width: 600px;
        height: 550px;
        margin-top: 30px;
        background-color: #f6f6f6;
        h4{
         line-height: 100px;
          margin-left: 30px;
        }
        >ul{
          list-style: none;
          padding-left: 0px;
          width: 100%;
          height: 100%;
          display: flex;
          
          flex-wrap: wrap;
          >li{
            width: 180px;
            height: 180px;
            margin: 0 10px 100px 10px;
            img{
              width: 150px;
              height: 150px;
            }
            span{
              font-size: 12px;
              text-align: center;
              display: inline-block;
            }
          }
        }
      }
      .zhuanqu{
        
        border-radius: 5%;
        width: 600px;
        height: 550px;
        margin-top: 130px;
        background-color: #f6f6f6;
        
        h4{
          line-height: 100px;
          margin-left: 30px;
        }
        >ul{
           list-style: none;
            padding-left: 0px;
            width: 100%;
            height: 100%;
            display: flex;
            // justify-content: center;
            flex-wrap: wrap;
            padding-bottom: 1rem;
          
          >li{
            width: 180px;
            height: 180px;
            margin: 0 10px 100px 10px;
            
            img{
              width: 150px;
              height: 150px;
            }
            span{
              font-size: 12px;
              text-align: center;
              display: inline-block;
            }
          }
        }
      }
    }
    
  }
  .active{
          background: orangered;
          color: #fff;
          border-radius: 50px;
  }
  
  
</style>